<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.niit.model.Book"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统</title>
<!--引入css文件夹里面的bootstrap.css-->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
<!--引入js文件夹里面的jquery-->
<script src="../static/bootstrap/js/jquery.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.bundle.js"></script>
<!--引入js文件夹里面的bootstrap.js-->
<script src="../static/bootstrap/js/bootstrap.js"></script>
</head>
<body>

	<%
		String username = (String) session.getAttribute("username");
		List<Book> lstBooks = (List<Book>) session.getAttribute("lstBooks");
		pageContext.setAttribute("lstBooks", lstBooks);
		// 用于刷新页面后，设置查询输入框的值
		String queryCode =(String) session.getAttribute("queryCode");
		String queryName =(String) session.getAttribute("queryName");
	%>
	
	<%
		// 获取项目上下文
		String baseUrl = request.getContextPath();
	%>
	<div class="container">
		<h1>欢迎<%=username%></h1>
		
		<!-- 查询条件 -->
		<div class="row mb-2">
			<div class="col-1 text-center">
			 <label for="" class="col-form-label">编号</label>
			</div>
			<div class="col-2">
			 <input type="text" class="form-control" id="query_code" value="${queryCode}">
			</div>
			<div class="col-1 text-center">
			 <label for="" class="col-form-label">名称</label>
			</div>
			<div class="col-2">
			 <input type="text" class="form-control" id="query_name" value="${queryName}">
			</div>
			<div class="col-2">
			 	<button class="btn btn-primary" id="query_book">查询</button>
			</div>
			<div class="col-2 offset-2 text-right">
			 	<Button class="btn btn-success" id="add_book">新增</Button>
			</div>
		</div>
		
		<!-- 列表展示 -->
		<table class="table table-bordered text-center">
			<tr class="table-primary ">
				<th>序号</th>
				<th>编号</th>
				<th>名称</th>
				<th>单价</th>
				<th>作者</th>
				<th>库存</th>
				<th>出版社</th>
				<th>描述</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${lstBooks}" var="book" varStatus="status">
				<tr>
					<td>${status.index+1}</td>
					<td>${book.code}</td>
					<td>${book.name}</td>
					<td>${book.price}</td>
					<td>${book.author}</td>
					<td>${book.stock}</td>
					<td>${book.publisher}</td>
					<td>${book.description}</td>
					<td><span style="padding: 5px; color: blue; cursor: pointer;" onclick="editBook('${book.id}')">编辑</span> <span style="padding: 5px; color: blue; cursor: pointer;" onclick="deleteBook('${book.id}')">删除</span></td>
				</tr>
			</c:forEach>
		</table>
		
		<div class="modal fade" id="delete-modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						请确认
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						确定删除该书籍？
					</div>
					<div class="modal-footer">
						<button class="btn btn-success" id="deleteBook">确定</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 消息提示框 -->
		<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
		    <div id="deleteToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="1000">
		      <div class="toast-body">
		       
		      </div>
		    </div>
		 </div>
		 
		 <!-- 查看书籍详细信息的模态框 -->
		 <div class="modal fade" id="edit-modal" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>编辑书籍信息</h4>
                        <button class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                            <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    编号
					                </span>
					            </div>
					            <input type="text" class="form-control" disabled id="code">
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    名称
					                </span>
					            </div>
					            <input type="text" class="form-control" id="name">
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    单价
					                </span>
					            </div>
					            <input type="text" class="form-control" id="price">
					            <div class="input-group-append">
					                <span class="input-group-text">元</span>
					            </div>
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    作者
					                </span>
					            </div>
					            <input type="text" class="form-control" id="author">
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    库存
					                </span>
					            </div>
					            <input type="number" class="form-control" id="stock">
					            <div class="input-group-append">
					                <span class="input-group-text">本</span>
					            </div>
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    出版社
					                </span>
					            </div>
					            <input type="text" class="form-control" id="publisher">
					        </div>
					        <div class="input-group mb-2">
					            <div class="input-group-prepend">
					                <span class="input-group-text">
					                    描述
					                </span>
					            </div>
					            <textarea rows="3" class="form-control" id="description"></textarea>
					        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" id="saveBook">保存</button>
                    </div>
                </div>
            </div>
        </div>
        
         <!-- 消息提示框 -->
		<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
		    <div id="updateBookToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
		      <div class="toast-body text-center">
		        	
		      </div>
		    </div>
		</div>

	</div>
	
	<script type="text/javascript">
		$("#add_book").click(function() {
			window.open("addbook.jsp", "_blank");
		});
		
		var baseUrl = '<%=baseUrl%>';
		var bookId = "";
		
		function deleteBook(id) {
			//alert("删除"+id);
			$("#delete-modal").modal();
			bookId = id;
		}
		// 删除
		$('#deleteBook').click(function() {
			// ajax发送请求 (get / post)
			$.ajax({
				type : "GET",
				url : baseUrl + "/DeleteBookServlet.do",
				data : {
					id : bookId
				},
				success : function(data) {
					$("#delete-modal").modal("hide");
					var code = data.code;
					if(code == 1){
						$('#deleteToast>.toast-body').text(data.message);
						$('#deleteToast').toast('show');
						// 重新加载页面
						setTimeout(function() {
							window.location.href=baseUrl+"/BookListServlet.do";
						}, 1000);
					}else{
						$('#deleteToast>.toast-body').text(data.message);
						$('#deleteToast').toast('show');
					}
				},
				error : function(data) {
					$('#deleteToast>.toast-body').text("系统错误");
					$('#deleteToast').toast('show');
				}
			});
		});
		
		// 编辑
		function editBook(id){
			$("#edit-modal").modal();
			$.ajax({
				type : "GET",
				url : baseUrl + "/ReadBookServlet.do",
				data : {
					id : id
				},
				success : function(data) {
					console.log(data);
					var code = data.code;
					if(code == 1){
						var book = data.data;
						bookId = book.id;
						// 从后端获取对象数据后，设置到前端页面的输入框中
						$("#code").val(book.code);
						$("#name").val(book.name);
						$("#price").val(book.price);
						$("#author").val(book.author);
						$("#stock").val(book.stock);
						$("#publisher").val(book.publisher);
						$("#description").val(book.description);
					}
				},
				error : function(data) {
					
				}
			});
		}
		
		// 保存书籍
		$("#saveBook").click(function(){
			var code = $('#code').val();
    		var name = $('#name').val();
    		var price = $('#price').val();
    		var author = $('#author').val();
    		var stock = $('#stock').val();
    		var publisher = $('#publisher').val();
    		var description = $('#description').val();
    		var book = {
    				id : bookId,
    				code : code,
					name : name,
					price:price,
					author:author,
					stock:stock,
					publisher:publisher,
					description:description
    		};
    		// ajax发送请求
			$.ajax({
				type : "POST",
				url : baseUrl + "/UpdateBookServlet.do",
				data : book,
				success : function(data) {
					console.log(data);
					// 隐藏模态框
					$("#edit-modal").modal("hide");
					var code = data.code;
					if(code == 1){
						$('#updateBookToast>.toast-body').text(data.message);
						$('#updateBookToast').toast('show');
						// 刷新书籍列表页面
						setTimeout(function() {
							window.location.href=baseUrl+"/BookListServlet.do";
						}, 2000);
					}else{
						$('#updateBookToast>.toast-body').text(data.message);
						$('#updateBookToast').toast('show');
					}
				},
				error : function(data) {
					$('#updateBookToast>.toast-body').text("系统错误");
					$('#updateBookToast').toast('show');
				}
			});
		});
		
		// 查询书籍
		$("#query_book").click(function(){
			var queryCode = $("#query_code").val();
			var queryName = $("#query_name").val();
			var book = {
    				code : queryCode,
					name : queryName
    		};
    		// ajax发送请求
			$.ajax({
				type : "POST",
				url : baseUrl + "/QueryBooksServlet.do",
				data : book,
				success : function(data) {
					window.location.reload();
				},
				error : function(data) {
					$('#updateBookToast>.toast-body').text("系统错误");
					$('#updateBookToast').toast('show');
				}
			});
			
		});
		
</script>
</body>
</html>